<template>
  <div class="c-pb80 ">
    <new-search-bar :selectList="selectList" :searchText="searchText" @search='searchShop' @cancel='searchShop'></new-search-bar>
    <div class="c-w100 c-hh10 c-bg-sgray"></div>
    <div @click="clickShop(item.mgId)" v-for="(item,index) in shopList" :key="index" class="c-flex-row c-ph24 c-bg-white c-bd-b1 c-pt24 c-pb20">
      <div class="c-maxh180 c-ww180 c-text-hidden c-br6">
        <img class="c-w100 imgCloseBig" :src="$addXossFilter(item.avatar)" alt="暂无图片" />
      </div>
      <div class="c-pl20 c-flex-grow1 c-flex-column c-w0 c-justify-sb">
        <div class="c-fs24 c-lh30 c-fc-xblack c-text-ellipsis2 c-pt5"><span v-if="item.flashSales && item.flashSales.sales.status == 2" class="c-fs16 theme-bg c-fc-white c-mr4 c-textAlign-c c-br4 c-pv4 c-ph4">限时{{Number(item.flashSales.price) == 0 ? '免费' : '折扣'}}</span>{{item.name}}</div>
        <div class="c-pb5 c-flex-row c-aligni-center">
          <price-com :price="getPrice(item)" :optimal="item.optimal" :prodType="ckFrom.shopping" :priceTagClass="'c-fs20 c-fc-xmlred'" :numberClass="'c-fc-xmlred'"></price-com>
          <span v-if="item.originalPrice * 1 > 0" class="c-fs20 c-fc-gray c-text-decoration-through">{{'￥' | iosPriceFilter}}{{item.originalPrice}}</span>
        </div>
      </div>
    </div>
    <div v-show="showHot">
      <div class="c-fs24 c-fc-xblack c-ph24 c-fw-b c-pv24 c-w100 c-flex-row c-aligni-center c-justify-sb" v-if="searchList && searchList.length > 0">历史搜索
        <span class="iconfont c-fs24 c-fc-sgray" @click="deleteAll">&#xe6b3;</span>
      </div>
      <div v-if="searchList && searchList.length > 0" class="c-flex-row c-flexw-wrap c-pl24 c-pr50 c-p" :class="showMore && downBtn ? 'c-maxh110 c-text-hidden' : ''" ref="searchBox">
        <div class="c-fs22 c-fc-gray c-hh36 c-lh36 c-ww36 c-bg-sgray c-brp50 c-textAlign-c iconfont c-pa c-p-r24 c-p-b16" v-if="showMore && searchList && searchList.length > 0" :class="[showMore ? 'icon-xiafangxiang' : '',downBtn == false ? 'icon-shangfangxiangjian' : (downBtn == true ? 'icon-xiafangxiang' : '')]" @click="changeBtn()"></div>
        <div @click="searchShop({searchValue: item})" v-for="(item,index) in searchList" :key="index" class="c-maxw">
          <div v-if="item && item.length > 0" class="c-fs22 c-fc-gray c-ph20 c-mr12 c-bg-sgray c-br18 c-mb22 c-text-ellipsis1 c-hh40 c-lh40">{{item}}</div>
        </div>
      </div>
      <div class="c-fs24 c-fc-xblack c-ph24 c-fw-b c-mt24">为你推荐</div>
      <div class="c-text-hidden c-bg-white c-ph20 c-pt4 c-pb30">
        <water-fall v-model="shopRecommendList" ref="shopRecommendList">
          <template v-slot:list="{list}">
            <div class="c-flex-column c-mt24 c-bg-white c-br8 c-text-hidden box-shadow c-mh10" v-for="(item,index) in list" @click="clickShop(item.mgId)" :key="index">
              <div class="c-w100 c-text-hidden c-maxh310">
                <img class="c-w100 imgCloseBig" v-lazy="item.avatar || require('../../../assets/defult270.png')" alt="暂无图片"/>
              </div>
              <div class="c-pv12 c-ph12">
                <div class="c-fs24 c-fc-xblack c-text-ellipsis2"><span v-if="item.flashSales && item.flashSales.sales.status == 2" class="c-fs16 theme-bg c-fc-white c-mr4 c-textAlign-c c-br4 c-pv4 c-ph4">限时{{Number(item.flashSales.price) == 0 ? '免费' : '折扣'}}</span>{{item.name}}</div>
                <div class="c-flex-row c-mt12 c-aligni-baseline c-justify-sb">
                  <price-com :price="getPrice(item)" :optimal="item.optimal" :prodType="ckFrom.shopping" :priceTagClass="'c-fs20 c-fc-xmlred'" :numberClass="'c-fc-xmlred'"></price-com>
                  <div class="c-fs20 c-fc-gray c-text-decoration-through" v-if="item.originalPrice * 1 > 0">{{'￥' | iosPriceFilter}}{{item.originalPrice}}</div>
                </div>
              </div>
            </div>
          </template>
        </water-fall>
      </div>
    </div>
    <loading-status-tem :dataStatus="dataStatus" noDataText="暂无商品"></loading-status-tem>
  </div>
</template>

<script>
import newSearchBar from "@/components/templates/common/newSearchBar.vue"
import loadingStatusTem from '@/components/templates/common/loadingStatusTem.vue'
import waterFall from "@/components/templates/common/waterfall.vue"
import PriceCom from '@/components/templates/common/priceCom.vue'
import {
  utilJs
} from "@/utils/common.js"
let pageIndex = 1;
export default {
  name: "SearchShop",
  components: {
    loadingStatusTem,
    newSearchBar,
    waterFall,
    PriceCom
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName") ? localStorage.getItem("colorName") : "mb5_default",
      showHot: true,
      searchText: '',
      dataStatus: 'HAS_MORE_DATA',
      shopRecommendList: [],
      shopList: [],
      searchList: [], // 历史搜索列表
      showMore: false, // 历史搜索上下展示按钮
      downBtn: true,
      selectList: [["名称", "讲师"]],
      ckFrom: global.ckFrom
    };
  },
  computed: {
    getPrice() {
      return function(item) {
       return item.flashSales && item.flashSales.sales.status == 2 ? item.flashSales.price : item.price
      }
    }
  },
  created() {
    utilJs.appShare(this);
  },
  methods: {
    // 删除全部搜索记录
    deleteAll() {
      let that = this;
      that.$cjConfirm({
        title: '', //
        titleCenter: true, //标题是否居中
        message: '确认删除全部历史记录？',
        messageCenter: true, //内容是否居中
        showMasker: true, //是否显示透明背景
        clickCloseModal: false, //是否点击透明背景关闭弹窗
        showCancelButton: true, //是否显示取消按钮
        cancelButtonText: '', //取消按钮文本
        confirmButtonText: '', //确认按钮文本
        onConfirm() {
          utilJs.getMethod(global.apiurl + "goods/delSearch", (res) => {
            that.searchList = [];
          });
        },
        onCancel() {
        },
      })
    },
    // 改变按钮方向
    changeBtn() {
      this.downBtn = !this.downBtn;
    },
    searchShop(e) {
      pageIndex = 1;
      this.searchText = e.searchValue
      this.shopList = [];
      this.showHot = false;
      this.getGoods();
    },
    clickShop(shopNo) {
      this.$routerGo(this, "push", {
        path: "/mall/shopDetail/shopDetail",
        query: {
          shopNo: shopNo
        }
      });
    },
    getGoods() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      utilJs.getMethod(global.apiurl + "goods?q=" + encodeURIComponent(this.searchText) + "&page=" + pageIndex, res => {
        if (pageIndex == 1) {
          this.shopList = res.goods.data;
        } else {
          this.shopList = [...this.shopList, ...res.goods.data];
        }
        if (res.goods.total * 1 == res.goods.to * 1) {
          this.dataStatus = res.goods.total * 1 == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
        } else {
          this.dataStatus = 'HAS_MORE_DATA';
          pageIndex++;
        }
      },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        });
    },
    getRecomGoods() {
      utilJs.getMethod(global.apiurl + "goods/recomGoods", (res) => {
        this.$refs.shopRecommendList.clear();
        this.shopRecommendList = res;
      });
    },
    // 获取搜索记录列表
    getSearchList() {
      utilJs.getMethod(global.apiurl + "goods/getSearchList", (res) => {
        this.searchList = res;
        this.$nextTick(() => {
          if (this.$refs.searchBox && this.$refs.searchBox.clientHeight >= 75) {
            this.showMore = true;
          }
        })
      });
    },
    //分享
    wechatShare: function () {
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.wechatConfig(shareUrl, "", "", "", function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
    windowScrollFunction: function () {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.shopList.length > 0) {
          this.getGoods();
        }
      });
    }
  },
  activated() {
    setDocumentTitle("搜索");// eslint-disable-line
    this.wechatShare();
    pageIndex = 1;
    this.showHot = true;
    this.dataStatus = "HAS_MORE_DATA";
    this.searchText = "";
    this.shopList = [];
    this.shopRecommendList = [];
    this.getRecomGoods();
    this.getSearchList();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    window.removeEventListener('scroll', this.windowScrollFunction);
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
input {
  font-size: 0.7rem;
  padding: 0 0.4rem;
  border: 0;
  background: none;
  outline: none;
}

input:focus {
  outline: none;
}
.c-p-t60 {
  top: 1.5rem;
}
.c-ww292 {
  width: calc(50% - 0.2rem);
  float: left;
}
.box-shadow {
  box-shadow: 0px 2px 4px 0px rgba(204,204,204,0.40);
}
</style>
